<template>
  <div>
    <el-container>
      <div class="bg"></div>
      <el-header>

      </el-header>
      <el-main>
        <BlobMain/>
      </el-main>
      <el-footer>

      </el-footer>
    </el-container>
  </div>
</template>
<script>
import BlobMain from "@/components/BlobMain";

export default {
  components: {
    BlobMain
  }
};
</script>

<style lang="scss" scoped>

$color-ablue: #8ec5fc !default;
$color-apink: #e0c3fc !default;
$color-sblue: #2bd2ff !default;
$color-spink: #fa8bff !default;
$color-sgreen: #2bff88 !default;
.bg {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: -2;
  @media (max-width: 760px) {
    background: -webkit-linear-gradient(87deg, $color-ablue, $color-apink);
    background: -o-linear-gradient(87deg, $color-ablue, $color-apink);
    background: -moz-linear-gradient(87deg, $color-ablue, $color-apink);
    background: linear-gradient(87deg, $color-ablue, $color-apink);
  }
  @media (min-width: 760px) {
    background: -webkit-linear-gradient(
      45deg,
      $color-sblue,
      $color-spink,
      $color-sgreen
    );
    background: -o-linear-gradient(
      45deg,
      $color-sblue,
      $color-spink,
      $color-sgreen
    );
    background: -moz-linear-gradient(
      45deg,
      $color-sblue,
      $color-spink,
      $color-sgreen
    );
    background: linear-gradient(
      45deg,
      $color-sblue,
      $color-spink,
      $color-sgreen
    );
  }
}
</style>
